<template>
    <div>
        <div class="input__wrapper mt-[40px]">
            <input type="text" placeholder="输入产品型号" class="input__inner" v-model="searchVal">
            <img :src="search.src" alt="" class="w-[14px] h-[14px] translate-x-4" @click="handleSearch">
        </div>
        <div class="text-[30px] mt-[40px]" v-if="tableVisible">
            ES5030封装库文件
        </div>
        <table class="w-[660px] mt-[30px]" v-if="tableVisible">
            <thead>
                <tr>
                    <th>型号</th>
                    <th>设计文档</th>
                    <th>模型</th>
                    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ES5030</td>
                    <td class="text-brown">ZIP</td>
                    <td>--</td>
                </tr>
            </tbody>
        </table>
        <div v-if="!tableVisible">未检索到相应的结果  {{ searchVal }} 请重新输入</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import search from '@assets/search1.png'
const searchVal = ref('ES5030')
const tableVisible = ref(true)
const handleSearch = () => {
    if(searchVal.value=='ES5030'){
        tableVisible.value=true
    }else{
        tableVisible.value=false
    }
}
</script>
<style lang="scss" scoped>
.input__wrapper {
    width: 660px;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    align-items: center;
}

.input__inner {
    width: 100%;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    box-sizing: border-box;
    flex-grow: 1;
}
th{
    background: #712C2F;
    color: #fff;
    height: 50px;
}
thead{
    border-radius: 2px 0px 0px 0px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
td{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
table{
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
</style>